import React from "react";
import { sleep } from 'antd-mobile/es/utils/sleep'
import styles from '@/assets/css/guest.module.css';

const GuestIndex = () => {
    let navigate = React.Router.useNavigate();
    let [list, SetList] = React.useState<any>([]);
    let [hasMore, SethasMore] = React.useState(false);
    let ref = React.useRef(null);


    //生命周期
    React.useEffect(() => {
        GetGuestData()
    }, [])

    //封装右侧滑动的按钮数据
    const rightBtn = [
        {
            key: 'delete',
            text: '删除住客',
            color: 'danger',
        }
    ]

    //下拉刷新
    const OnRefresh = async () => 
    {
        SethasMore(true);
        SetList([]);

        await sleep(1000);
        await GetGuestData();
    };

    //上拉加载
    const LoadMore = async () =>
    {
        await sleep(1000)
        GetGuestData()
    }

    //请求数据的方法
    const GetGuestData = async () => 
    {

        let data = [
            {
                id: 1,
                gender: '男',
                mobile: "13512644557",
                nickname: "小红"
            },
            {
                id: 2,
                gender: '女',
                mobile: "13512644557",
                nickname: "张三"
            }
        ]

        SethasMore(false)
        SetList([...list,...data]);
    }

    // 删除住客信息
    const GuestDelete = async (gid: number, e: any) =>
    {
        console.log(gid)
    }

    return (
        <>
            <React.UI.PullToRefresh onRefresh={OnRefresh}>
                {/* 列表结构 */}
                <React.UI.List>
                    {list.map((item: any, key: number) => (
                        <React.UI.SwipeAction
                            ref={ref}
                            key={key}
                            rightActions={rightBtn}
                            onAction={GuestDelete.bind(this, item.id)}
                        >
                            <React.UI.List.Item
                                key={key}
                                description={item.mobile}
                                onClick={() => navigate(`/guest/edit?gid=${item.id}`)}
                            >
                                {item.nickname}({item.gender})
                            </React.UI.List.Item>
                        </React.UI.SwipeAction>
                    ))}
                </React.UI.List>

                {/* 上拉加载 */}
                <React.UI.InfiniteScroll
                    loadMore={LoadMore}
                    hasMore={hasMore}
                    threshold={0}
                />
            </React.UI.PullToRefresh>

            <div className={styles.AddGuest}>
                <React.Router.Link to="/guest/add">添加住客</React.Router.Link>
            </div>
        </>
    );
};

export default GuestIndex;
